<template>

  <div class="app-container">
    <div class="filter-container">
      <div class="filter-row">
        <div class="filter-item">
          <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd" style="width: 300px;">
          </el-date-picker>
        </div>
        <div class="filter-actions">
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
        </div>
      </div>
    </div>
    <!-- <el-card class="point-card"> -->
    <!-- 标签页 -->
    <el-tabs v-model="activeTab" class="point-tabs">
      <el-tab-pane name="list">
        <span slot="label"><i class="fa fa-list"></i> 清单</span>
        <!-- 点位列表 -->
        <div class="point-list">
          <div v-for="(point, index) in points" :key="index" class="point-item" @click="showPointDetails(point)">
            <div class="point-name">{{ point.pointName }}</div>
            <div class="point-details">
              <span class="detail-item location">
                <i class="fa fa-map-marker"></i> {{ point.pointAddress ? point.pointAddress : '--' }}
              </span>
              <span class="detail-item county">
                行政区划：{{ point.county ? point.county : '--' }}
              </span>
              <span class="detail-item county">
                河流：{{ point.riverName ? point.riverName : '--' }}
              </span>
              <span class="detail-item warn">
                预警类型：{{ warnCategoryMap[point.warnCategory] || point.warnCategory }}
              </span>

            </div>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane name="detail" disabled>
        <span slot="label"><i class="fa fa-bar-chart"></i> 详情</span>

        <div class="point-management">
          <el-container>
            <el-header>
              <div class="header-content">
                <h1>{{ selectedPointName ? selectedPointName : '--' }}</h1>
                <el-button type="primary" @click="handleBack" icon="el-icon-back">
                  返回
                </el-button>
              </div>
            </el-header>

            <el-main>




              <div class="point-summary">
                一共 <span class="point-count">{{ pointDetail.length }}</span> 个预警
              </div>


              <!-- 任务列表 -->

              <el-empty v-if="pointDetail.length === 0" description="暂无任务数据"></el-empty>

              <div class="point-item" v-for="(point, index) in pointDetail" :key="index">
                <el-descriptions :column="1" border class="point-details">
                  <el-descriptions-item label="预警时间">{{ point.warntime }}</el-descriptions-item>
                  <el-descriptions-item label="报警因子">
                    <span class="highlight">{{ point.itemname }}</span>
                  </el-descriptions-item>
                  <el-descriptions-item label="预警内容
">
                    <span class="highlight">{{ point.warnmessage }}</span>
                  </el-descriptions-item>
                  <el-descriptions-item label="预警类别">{{ warnCategoryMap[point.warncategory] || point.warncategory
                    }}</el-descriptions-item>
                </el-descriptions>
              </div>

            </el-main>
          </el-container>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- </el-card> -->
  </div>
</template>





<script>
import { getYujing, getYujingDetail } from "../../api/yujing.js";
export default {
  pointName: 'YujingPanel',
  data() {
    return {
      activeTab: 'list',
      dateRange: [],
      points: [
        {
          "warnCategory": 1,
          "countyCode": "140581106",
          "pointId": "0F63B561-0EE0-4ABB-8FFA-7EE65D8DCC6C",
          "pointAddress": null,
          "pointName": "牛村",
          "riverId": "7c816e5e-11bb-470e-8a42-82df3f49eb09",
          "latitude": null,
          "county": "河西镇",
          "nums": 1,
          "riverName": "丹河",
          "longitude": null
        },
        {
          "warnCategory": 1,
          "countyCode": "140581106",
          "pointId": "75961285-01F8-43B3-9A79-586119318A9D",
          "pointAddress": null,
          "pointName": "河西段",
          "riverId": "7c816e5e-11bb-470e-8a42-82df3f49eb09",
          "latitude": null,
          "county": "河西镇",
          "nums": 2,
          "riverName": "丹河",
          "longitude": null
        }
      ],
      pointDetail: [

      ],
      selectedPointName: null,



    }
  },
  computed: {
    warnCategoryMap() {
      return {
        "1": '水环境',
        "2": '视频',
        "3": '在线监测'
      }
    }
  },
  mounted() {
    this.initDateRange();
    this.getYujingData();
  },
  methods: {
    formatDate(date) {
      return date.getFullYear() + '-' +
        String(date.getMonth() + 1).padStart(2, '0') + '-' +
        String(date.getDate()).padStart(2, '0');
    },
    initDateRange() {
      const today = new Date();
      const yesterday = new Date(today);
      yesterday.setDate(today.getDate() - 1);
      this.dateRange = [this.formatDate(yesterday), this.formatDate(today)];
    },
    getYujingData() {
      getYujing({
        beginTime: this.dateRange[0],
        endTime: this.dateRange[1]
      }).then(res => {
        if (res.code === 200) {
          this.points = res.data;

        }
      });
    },
    getYujingDetail(pointId) {
      getYujingDetail({
        pointId: pointId,
        beginTime: this.dateRange[0],
        endTime: this.dateRange[1],
        pageNum: 1,
        pageSize: 99999
      }).then(res => {
        if (res.code === 200) {
          this.pointDetail = res.rows;
        }
      });
    },
    handleQuery() {
      this.getYujingData();
      this.$emit('queryYujingData', {
        beginTime: this.dateRange[0],
        endTime: this.dateRange[1]
      });
    },
    handleTabClick(tab) {
      this.activeTab = tab.name;
      if (tab.name === 'detail') {
        this.getYujingDetail(this.pointDetail[0].pointId);
      }
    },

    handleTab(tabName, pointId,pointName) {
      this.selectedPointName = pointName;
      this.activeTab = tabName;
      if (tabName === 'detail') {
        this.getYujingDetail(pointId);
      }
    },

    showPointDetails(point) {
      this.selectedPointName = point.pointName;
      this.activeTab = 'detail';
      this.getYujingDetail(point.pointId);
      this.$emit('showPointDetails', point);
    },
    handleBack() {
      this.activeTab = 'list';
    },
  }
}

</script>
<style>
.app-container {
  padding: 20px;
  max-width: 500px;
  margin: 0 auto;
}

.filter-container {
  padding: 5px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e6e6e6;
}


.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
}

.filter-item {
  display: flex;
  align-items: center;
  margin-bottom: 0 !important;

}

.filter-item label {
  width: 80px;
  text-align: right;
  margin-right: 10px;
  color: #606266;
}

.filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.page-title {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 20px;
  color: #303133;
  display: flex;
  align-items: center;
}

.page-title i {
  margin-right: 12px;
  color: #409EFF;
}

.point-card {
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.point-tabs .el-tabs__header {
  margin: 0;
}



/* ... existing code ... */

.point-list {
  padding: 0;
}

.point-item {
  border-bottom: 1px solid #ebeef5;
  cursor: pointer;
  transition: background-color 0.3s;

  last-child {
    border-bottom: none;
  }
}

.point-item:hover {
  background-color: #f5f7fa;
}

.point-name {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 8px;
}

.point-details {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 14px;
}

.detail-item {
  display: flex;
  align-items: center;
}

.location {
  color: #909399;
}

.warn {
  color: #f56c6c;
}

.county {
  color: #67c23a;
}

.date {
  color: #909399;
}

.stat-container {
  padding: 40px;
  text-align: center;
}

.stat-icon {
  font-size: 48px;
  color: #c0c4cc;
  margin-bottom: 15px;
}

.stat-title {
  font-size: 18px;
  color: #909399;
  margin-bottom: 20px;
}

.summary-card {
  margin-top: 20px;
}

.summary-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #ebeef5;
}

.summary-label {
  color: #606266;
}

.summary-value {
  font-weight: 500;
}

.total-points {
  color: #409EFF;
}

.point-management {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
}

.search-bar {
  margin: 20px 0;
  align-items: center;
}

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
}

.summary-card {
  margin-bottom: 20px;
}

.point-summary {
  font-size: 18px;
  padding: 10px 0;
}

.point-count {
  color: #e74c3c;
  font-weight: bold;
  margin: 0 5px;
}

.point-list-card {
  padding: 20px;
}



.point-header {
  margin-bottom: 15px;
  align-items: center;
}

.point-details {
  margin-top: 10px;
}

.highlight {
  color: #e74c3c;
}


@media (max-width: 768px) {
  .filter-item {
    width: 100%;
  }

  .filter-item label {
    width: 100px;
  }

  .point-details {
    gap: 10px;
  }
}
</style>